import React, { useContext } from 'react'
import colorContext from './colorContext'
import sizeContext from './sizeContext'

export default function ColorShow() {
  const colorValue = useContext(colorContext)
  const sizeValue = useContext(sizeContext)
  return (
    // <div>
    //   {
    //     <colorContext.Consumer>
    //       {
    //         value => {
    //           return (
    //             <span style={{color: value.color}}>
    //               {
    //                 <sizeContext.Consumer>
    //                   {
    //                     value => {
    //                       return (
    //                         <a href="https://www.baidu.com" style={{fontSize: value.size}}>百度</a>
    //                       )
    //                     }
    //                   }
    //                 </sizeContext.Consumer>
    //               }
    //             </span>
    //           )
    //         }
    //       }
    //     </colorContext.Consumer>
    //   }
    // </div>
    <div>
      <span style={{color: colorValue.color}}>
        <a href="https://www.baidu.com" style={{fontSize: sizeValue.size}}>百度</a>
      </span>
    </div>
  )
}
